<template>
	<view class="st-uni-moment">
        <view class="post-left">
            <image class="post_header" :src="momentData.avatar" @tap="$emit('avatar')"></image>
            <slot name="left"></slot>
        </view>

        <view class="post_right">
            <slot name="nickname"><text class="post-username">{{momentData.nickname}}</text></slot>
            <slot name="nicknameAppend"></slot>
            <view id="paragraph" class="paragraph">{{momentData.content}}</view>
            <!-- 相册 -->
            <view class="thumbnails">
                <view :class="momentData.images.length === 1?'my-gallery':'thumbnail'" v-for="(image, index_images) in momentData.images" :key="index_images">
                    <image class="gallery_img" lazy-load mode="aspectFill" :src="image" :data-src="image" @tap="previewImage(momentData.images,index_images)"></image>
                </view>
            </view>
            <view class="timestamp">{{momentData.timeAt}}</view>

            <slot></slot>
        </view>
	</view>
</template>

<script>
	export default {
	    props: {
	        momentData: {
	            type: Object,
            }
        },
		data() {
	        return {}
		},
		onLoad() {
		},
		methods: {
            previewImage(imageList, image_index) {
                let current = imageList[image_index];
                uni.previewImage({
                    current: current,
                    urls: imageList
                });
            },
		}
	}
</script>

<style>
	.st-uni-moment {
        background: #fff;
        display: block;
        border-bottom: 1px solid #f2eeee;
        padding: 30upx 20upx;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    .st-uni-moment .post_header {

        width: 80upx !important;
        height: 80upx !important;
        border-radius: 50%;
        margin-top: 8upx;
    }
    .st-uni-moment .post-username{
        font-size:32upx;
        font-weight: 600;
        color: #36648B;
    }
    .st-uni-moment .gallery_img {
        width: 100%;
        height: 100%
    }

    .st-uni-moment  .post_right {
        font-size: 32upx;
        display: table-cell;
        padding-left: 20upx;
        width: 100%;
    }

    .st-uni-moment .thumbnails {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .st-uni-moment .thumbnails .thumbnail {
        width: 30%;
        height: 180upx;
        margin: 4upx;
        background: #757575;
        overflow: hidden;
    }

    .st-uni-moment .my-gallery{
        width: 250upx;
        height: 400upx;
        margin: 4upx;
        background: #757575;
        overflow: hidden
    }
</style>
